import { useState } from 'react';
import KeepAlive, { AliveScope } from 'react-activation';
import { Button } from 'acud';

const Text = () => {

    const [count, setCount] = useState(0);
    return (
        <div>
            count: {count}
            <Button onClick={() => setCount(count + 1)}>increase count</Button>
        </div>
    );

};

const KeepComponent = () => {

    const [show, setShow] = useState(true);
    return (
        <AliveScope>
            <button onClick={() => setShow((show) => !show)}>Toggle</button>
            <p>无 KeepAlive</p>
            {show && <Text />}
            <p>有 KeepAlive</p>
            {show && (
                <KeepAlive id="Test">
                    <Text />
                </KeepAlive>
            )}
        </AliveScope>
    );

};

export default KeepComponent;
